<template>
	<view>
		<!-- 头部导航 -->
		  <uni-nav-bar background-color="#3286ed" :statusBar="true" :fixed='true' color="#fff" title="回库申请" left-icon="left" right-text="新增" @clickLeft="backFn"     @clickRight="addFn"></uni-nav-bar>
		   <!-- 列表 -->
		   <!-- 客户列表 -->
		   <view v-if="searchShow==false">
			   <view >
				   <uni-row class="demo-uni-row">
					<uni-col :span="10">
						<zb-dropdown-menu  style="width: 100%" z-index="12">
						  <zb-dropdown-item     :options="option"   v-model="formData.returnType" @change="changeFn"></zb-dropdown-item>
						</zb-dropdown-menu>
					</uni-col>
					<uni-col :span="2">
						<view class="text" style="color:#c3c3c3">|</view>
					</uni-col>
					<uni-col :span="5">
						<view class="text" @click="isShow=true">筛选</view>
					</uni-col>
					<uni-col :span="2">
						<view class="text" style="color:#c3c3c3">|</view>
					</uni-col>
					<uni-col :span="5">
						<view class="text"><uni-icons @click="searchBtn" type="search" color="#c3c3c3" size="24"></uni-icons></view>
					</uni-col>
				   </uni-row>
			   </view>
			   <view style="width:100%;height: 88rpx;display: block"></view>
		   </view>
		   
		   <!-- 搜索记录 -->
		   <view>
			   <u-search  v-if="searchShow===true" style="height;40px;background-color: #fff;padding: 10px;" @clear="clearFn" :clearabled="true" showAction @custom="customFn" @search="inputSearchBtn" v-model.enter="formData.returnApplyNo" height='30' placeholder="请输入回货申请单编号" shape="square" actionText='取消'></u-search>
			   	<!-- 搜索历史记录 -->
			   	<view  v-if="searchShow===true && historyList.length && close1==true " >
			   		<u-cell title="搜索历史" style="background-color: #fff;margin-top: 3px;" >
			   				  <template #right-icon>
			   					  <uni-icons type="trash" @click="delFn" size="20"></uni-icons>
			   				  </template>
			   		</u-cell>
			   		<view class="history">
			   			<span v-for="(item,index) in historyList" :key="index" >
			   				<u-tag :text="item" borderColor="#eee" color="#eee" plain size="mini" :show="close1" closable @click="historyBtn(item,index)"   @close="closeFn( item,index)"></u-tag>
			   			</span>
			   		</view>
			   	</view>
		   </view>
		  
		   <view @click="toapplicationInfo(item.returnApplyNo)"  class="application" v-for="item in list" :key="item.id">
				<view class="application_one">{{item.returnApplyNo}}</view>
				<view class="desc">租赁销售订单：{{item.orderNo}}</view>
				<view class="desc">客户名称：{{item.customerName}}</view>
				<view class="desc">
					<view>
						<span>回货类型：</span>
						<span v-if="item.returnType==1">回货</span>
						<span v-if="item.returnType==2">退货</span>
					</view>
					<view>
						<span>物流状态：</span>
						<span style="color:#fdb644;" v-if="item.expensesStatus==1">物流已完成</span>
						<span style="color:#fdb644;" v-if="item.expensesStatus==2">物流未完成</span>
					</view>
					
				</view>
				<view class="addapplicaionChild" v-if="searchShow==false">
					<!-- <view  @click="addchild(item)"><button style="background-color: #fdb644;" size="mini" type="primary">添加</button></view> -->
					<view @click="toapplicationInfo(item.returnApplyNo)"><button style="background-color: #fdb644;" size="mini" type="primary">详情</button></view>
					<!-- <button class="addapplicaionChild" @click="addchild(item.id)">添加</button>
					<button class="info"  @click="toapplicationInfo(item.returnApplyNo)">详情</button> -->
				</view>
		   </view>	
		   <view v-if="list.length ==0 " class="BGC"></view>
		   <!-- 右边筛选 -->
		   <u-popup :closeable="true" v-if="isShow==true"   :show="isShow" customStyle="margin-top:44px" overlayStyle="margin-top:44px"  mode="right"  :closeOnClickOverlay="true" @close="closeBtn" >
		   		<view class="rightBox" >
		   			<u-cell  >
		   				<template #title>
		   					<view style="font-size: 16px;font-weight: 600;color:#ff7c35;">筛选</view>
		   				</template>
		   				<template #icon>
		   					<view style="font-weight: 900;color:#ff7c35;">|</view>
		   				</template>
		   			</u-cell>
					<view class="itemBox">
						<view class="title">租赁订单编号：</view>
						<u--input customStyle="height:30px" placeholder="请输入租赁订单编号"  v-model="formData.orderNo"></u--input>
					</view>
					<!-- <view class="itemBox">
						<view class="title">：</view>
						<u--input customStyle="height:30px" placeholder="请输入客户名称"  v-model="formData.customerName"></u--input>
					</view> -->
					<u-cell title="客户名称">
						<template #value>
							<navigator url="/pages/dialog/customer" open-type="navigate">
								<view v-if="formData.customerName" >{{formData.customerName}}</view>
								<view v-else  style="font-size: 14px;">请选择</view>
							</navigator>
							
						</template>
					</u-cell>
		   		</view>
		   		
		   		<view >
		   			  <uni-row >
		   				<uni-col :span="12">
		   				<u-button @click="reset" color="#c3c3c3"size="small" text="重置" ></u-button>
		   				</uni-col>
		   				<uni-col :span="12">
		   					<u-button type="warning"  @click="searchClick" size="small" text="确认"></u-button>
		   				</uni-col>
		   			  </uni-row>
		   		</view>
		   	</u-popup>
			<!-- 弹框提示 -->
			<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import{getBackWarehouseList} from '@/api/backapplication.js'
	import {getDicts} from '@/api/dictionary/index.js'
	import{listOrder} from '@/api/order/order.js'
	export default {
		data() {
			return {
				formData:{
					pageNum:1,
					pageSzie:10,
					returnType:'',//回货类型
					returnApplyNo:'',//回货申请单编号
					customerName:'',
					orderNo:'',//订单编号
				},
				total:0,
				searchShow:false,//输入框的出现
				close1:false,//控制搜索历史记录
				isShow:false,//控制右边筛选框
				list:[],
				historyList:[],//历史记录
				option:[
					{
					    text: '全部',
					    value: ''
					},
					// {
					//     text: '回货',
					//     value: 1
					// },
					// {
					//     text: '退货',
					//     value: 2
					// },
					
					{ text:'物流未完成',
					  value:2,},
					{ text:'物流已完成',
					value:1,},
				],//
				
			};
		},
		onLoad() {
			this.initData()
			this.getReturnTypeOptions()
		},
		onBackPress(){
			this.getValueS()
		},
		// 上划
		onReachBottom() {
			 if(this.formData.pageSize*this.formData.pageNum<this.total){
				 this.formData.pageNum++
				 let res=getBackWarehouseList(this.formData).then(reponse=>{
				 			 this.list.push(...reponse.rows)
							  console.log(this.list);
				 })
				
				 
			 }else{
				 console.log('已经加载完毕');
			 }
		},
		// 下拉
		async onPullDownRefresh() {
			this.list=[]
			this.formData={
				pageNum:1,
				pageSzie:10,
				returnType:'',//回货类型
				returnApplyNo:'',//回货申请单编号
				customerName:'',
				orderNo:'',//订单编号
			}
			await this.initData()
			setTimeout(()=>{
				uni.stopPullDownRefresh()
			},2000)
		},
		methods:{
			getValueS(e){
				console.log(e);
				this.formData.customerName=e.name
				console.log(this.formData.customerName);
			},
			async initData(){
				let res=await getBackWarehouseList(this.formData)
				console.log(res);
				this.list=res.rows
				this.total=res.total
			},
			//回货类型
			async getReturnTypeOptions() {
			  let res = await getDicts('return_type')
			  console.log(res);
			 let newArr= res.data.map((item,index)=>{
				  return {text:item.dictLabel,value:item.dictValue}
			  })
			  this.option=this.option.concat(newArr)
			  // console.log(this.option);
			  
			},
			// 返回上一级
			backFn(){
				 uni.navigateBack({delta:1})
			},
			// 详情
			toapplicationInfo(val){
				console.log(val);
				uni.navigateTo({
					url:'/pages/backapplication/backapplicationChildren/backapplicationChildren?returnApplyNo='+val
				}) 
				
			},
			addFn(){
				uni.redirectTo({
					url:'/pages/backapplication/addbackapplication/addbackapplication'
				})
			},
			// 添加子级申请单
			async addchild(item){
				// 校验产品是否申请完毕
			let	orderInfo=await listOrder({orderNo:item.orderNo})
				if(orderInfo.rows[0].orderStatus=='3'||orderInfo.rows[0].orderStatus=='4'||orderInfo.rows[0].orderStatus=='5'||orderInfo.rows[0].orderStatus=='6'){
					this.$refs.uToast.show({
						type:'warning',
						message:'该申请已完成',
					})
				}else{
					uni.navigateTo({
						url:'/pages/backapplication/addbackapplication/addbackapplication?item='+encodeURIComponent(JSON.stringify(item))
					})
				}
				
			},
			// 回货申请单的状态晒选
			changeFn(e){
				if(e.text=='物流未完成'){
					this.formData.returnType=''
					this.formData.expensesStatus=e.value
					this.initData()
				}
				if(e.text=='物流已完成'){
					this.formData.returnType=''
					this.formData.expensesStatus=e.value
					this.initData()
				}
				if(e.text==''||e.text=='回货'||e.text=='退货'){
					this.formData.returnType=e.value
					this.initData()
				}
				 
			},
			// 点击搜索图标
			searchBtn(){
				this.searchShow=true
				this.list=[]
			},
			// 搜索框的清除
			clearFn(){
				this.formData.returnApplyNo=''
				this.list=[]
				this.close1=true
			},
			// 搜索框的右侧控件
			customFn(){
				this.searchShow=false
				// this.list=[]
				this.initData()
			},
			// 搜索
			inputSearchBtn(val){
				if(!this.formData.returnApplyNo){
					this.list=[]
					return false
				}
				if(this.historyList.length){
					this.close1=false
				}
				this.initData()
				// 将搜索的数据放到历史记录表
				// 数组去重
				 let idx = this.historyList.findIndex((item) => item === val);
				 console.log(this.historyList);
				if (idx !== -1) {
				  this.historyList.splice(idx, 1);
				}
				this.historyList.unshift(this.formData.returnApplyNo)
				console.log(this.historyList);
			},
			// 搜索历史记录 当按钮
			historyBtn(item,index){
				console.log(item,index);
				this.formData.returnApplyNo=item
				this.close1=false
				this.historyList.splice(index,1)
				this.inputSearchBtn()
			},
			// 删除所有的利税记录
			delFn(){
				this.historyList=[]
				this.close1=false
			},
			// 单个删除记录
			closeFn(item,index){
				 this.historyList.splice(index, 1)
			},
			// 筛选弹框
			closeBtn(){
				this.isShow=false
			},
			// 筛选搜索
			searchClick(){
				// if(!this.formData.customerName && this.formData.orderNo){
				// 	this.list=[]
				// 	this.formData.pageNum=1
				// 	this.initData()
				// }
				this.list=[]
				this.formData.pageNum=1
				this.initData()
				this.isShow=false 
				this.formData={
					pageNum:1,
					pageSzie:10,
					returnType:'',//回货类型
					returnApplyNo:'',//回货申请单编号
					customerName:'',
					orderNo:'',//订单编号
				}
			},
			// 重置
			reset(){
				this.formData={
				pageNum:1,
				pageSzie:10,
				returnType:'',//回货类型
				returnApplyNo:'',//回货申请单编号
				customerName:'',
				orderNo:'',//订单编号
				}
			}
		}
		
	}
</script>

<style lang="scss" scoped>
	.BGC{
		width: 100%;
		min-height: 400px;
		background-image: url('@/static/images/bgc.png');
		background-size:100% 200px;
		background-repeat: no-repeat;
			margin: 200px 0;
	}
	.demo-uni-row{
		background-color: #fff;
		margin-bottom: 10px;
		width: 100%;
		position: fixed;
		z-index: 10;
			/* QQ、字节小程序文档写有 :host，但实测不生效 */
			/* 百度小程序没有 :host，需要设置block */
			/* #ifdef MP-TOUTIAO || MP-QQ || MP-BAIDU */
			display: block;
			/* #endif */
			.text{
				padding-top: 15px;
				font-size: 16px;
				text-align: center;
			}
	}
	  .application{
		  position: relative;
		  min-height: 50px;
		  padding: 10px;
		  margin: 10px 5px;
		  background-color: #fff;
		  border: solid 1px #c3c3c3;
		  .application_one{
			  font-size: 16px;
			  font-weight: 600;
			  padding-bottom: 8px;
		  }
		  .desc{
			  font-size: 12px;
			  color:#8c8b8a;
		  }
		  .addapplicaionChild{
			  position: absolute;
			  right: 20px;
			  bottom: 20px;
			  font-size: 12px;
			  color: #fd9540;
		  }
		  
	  }
	  // 右边弹框
	  .rightBox{
	  	min-width:300px;
	  	height:100%;
	  	.itemBox{
	  		height: 85px;
	  		padding: 10px;
	  		border-bottom: solid 1px #c3c3c3;
	  		.title{
	  			padding: 5px 0;
	  		}
	  	}
	  }
	  // 搜索框历史记录
	  .history{
	  	width: 100%;
	  	min-height: 50px;
	  	background-color: #fff;
	  	padding: 0px 10px 10px 5px;
	  	
	  	span{
	  		display: inline-block;
	  		min-width: 35px;
	  		height:22px;
	  		line-height: 22px;
	  		// background-color: red;
	  		text-align: center;
	  		margin: 5px;
	  	}
	  }
</style>
